import React from "react"
import { Accordion, List,Icon } from 'antd-mobile';

import {get_songList} from "../../api"

// import { List } from 'antd-mobile';

import {withRouter} from "react-router-dom";

// const Item = List.Item;

import myStyle from "./style/My.module.css"


class PlayList extends React.Component {
  constructor(){
    super()
    this.state = {
      create_list:[],
      collection_list:[],
      // imgUrl:""
    }
  }

  componentDidMount(){
    let uid = localStorage.getItem("uId")

    // login1()
    // .then(body=>body.json())
    // .then(res=>{
    //   let id = res.account.id
    //   get_songList(id)
    //   .then(body=>body.json())
    //   .then(res=>{
    //     // console.log(res.playlist);
    //       this.setState({
    //         create_list:res.playlist.filter(item=>item.userId==id),
    //         collection_list:res.playlist.filter(item=>item.userId!==id),
    //         // imgUrl:res.playlist.coverImgUrl
    //     })
    //     // console.log(this.state.create_list);
    //   })
    //   })


    get_songList(uid)
    .then(body=>body.json())
    .then(res=>{
      console.log(uid);
        this.setState({
          create_list:res.playlist.filter(item=>item.userId==+uid),
          collection_list:res.playlist.filter(item=>item.userId!==+uid),
          // imgUrl:res.playlist.coverImgUrl
      })
      // console.log(this.state.create_list);
    })
  }

  onChange = (key) => {
    console.log(key);
  }

  toGedan(id){
    // console.log(id)
    // this.props.history.push({pathname:"/my/gedan:"})
    this.props.history.push("/my/gedan?id="+id)
  }

  render() {
    return (
      <div style={{ marginTop: 10, marginBottom: 10 }}>
        <Accordion accordion openAnimation={{}} className="my-accordion" onChange={this.onChange}>
          
          <Accordion.Panel header={"我创建的歌单 "+"("+this.state.create_list.length+")"}>
            <List className="my-list">
              <List.Item>
                <ul style={{paddingLeft:'0'}}>
                  {this.state.create_list.map((item)=><li key={item.id} style={{display:'flex',marginBottom:'10px'}} 
                  onClick={this.toGedan.bind(this,item.id)}>
                    <img src={item.coverImgUrl} alt="" style={{width:'50px',height:'50px'}}/>
                    <div style={{display:'flex',flexDirection:'column'}}>
                      <span>{item.name}</span>
                      <span>{item.trackCount+"首"}</span>
                    </div>
                  </li>)}
                </ul>
              </List.Item>
              {/* <List.Item>content 2</List.Item>
              <List.Item>content 3</List.Item> */}
            </List>
          </Accordion.Panel>
          <Accordion.Panel header={"我收藏的歌单 "+"("+this.state.collection_list.length+")"}>
            <List className="my-list">
              <List.Item>
                <ul style={{paddingLeft:'0'}}
                className={myStyle.shoucang_gedan_list}>
                  {this.state.collection_list.map((item)=><li key={item.id} style={{display:'flex',marginBottom:'10px'}} 
                  onClick={this.toGedan.bind(this,item.id)}>
                    <img src={item.coverImgUrl} alt="" style={{width:'50px',height:'50px'}}/>
                    <div style={{display:'flex',flexDirection:'row'}}>
                      <div>
                        <span>{item.name}</span>
                        <span>{item.trackCount+"首"}</span>
                      </div>

                      <svg t="1574149009738" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2672" width="200" height="200"><path d="M512 127.1m-124.4 0a124.4 124.4 0 1 0 248.8 0 124.4 124.4 0 1 0-248.8 0Z" p-id="2673"></path><path d="M512 511.7m-124.4 0a124.4 124.4 0 1 0 248.8 0 124.4 124.4 0 1 0-248.8 0Z" p-id="2674"></path><path d="M512 897.3m-124.4 0a124.4 124.4 0 1 0 248.8 0 124.4 124.4 0 1 0-248.8 0Z" p-id="2675"></path></svg>
                    </div>
                  </li>)}
                </ul>
              </List.Item>
              {/* <List.Item>content 2</List.Item>
              <List.Item>content 3</List.Item> */}
            </List>
          </Accordion.Panel>
          {/* <Accordion.Panel header="Title 2" className="pad">this is panel content2 or other</Accordion.Panel>
          <Accordion.Panel header="Title 3" className="pad">
            text text text text text text text text text text text text text text text
          </Accordion.Panel> */}
        </Accordion>
      </div>
    );
  }
}


export default withRouter(PlayList)